<template>
  <div id="manifest">
    <x-header :left-options="{backText: ''}" class="vux-1px-b">奖励商品货单</x-header>
    <div class="mani_list">
      <h2 class="mani_title">原始商品货单: {{undeblocked}}单</h2>
      <ul class="mani_con">
        <li class="mani_con_box">
          <div class="mani_con_img">
            <img :src="imageData" alt="">
          </div>
          <div class="mani_con_right">
            <p>{{data.goods_name}}</p>
            <div class="mani_con_num">
              <b>解封单数：</b>
              <ul>
                <li>
                  <a href="javascript:void(0)" @click="jian">
                    <img src="./image/jian.png" alt="">
                  </a>
                </li>
                <li>
                  <label>
                    <input type="text" v-model="num" placeholder="6">
                  </label>
                </li>
                <li>
                  <a href="javascript:void(0)" @click="jia">
                    <img src="./image/jia.png" alt="">
                  </a>
                </li>
              </ul>
              <a href="javascript:void(0)" @click="jiefeng">
                <span>去解封</span>
              </a>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- <div class="mani_list">
      <h2 class="mani_title">奖励商品货单: 5单</h2>
      <ul class="mani_con">
        <li class="mani_con_box"
            v-for="(items, indexs) in 3"
            :key="indexs">
          <div class="mani_con_img">
            <img src="./image/jian.png"
                 alt="">
          </div>
          <div class="mani_con_right">
            <p>特级大红包</p>
            <i>截止有效期</i>
            <span>去解封</span>
          </div>
        </li>
      </ul>
    </div> -->
  </div>
</template>
<script>
import { getP2PGoodsDetail, getP2PUserPositions, getPriceTrend, addtransactionrecord, payunblock, prescribedtradinghours } from '@api'
import { mapMutations, mapState } from 'vuex'
import { SET_LOADING } from '@store/type'
import { GetQueryString } from '@utils/mixin'
import Vue from 'vue'
import { Confirm } from 'wc-messagebox'
import 'wc-messagebox/style.css'
Vue.use(Confirm)

export default {
  name: 'manifest',
  data () {
    return {
      payType: 1,
      means: 0, // 交易方式 进货
      account_type: 3, // 支付宝账户
      no: '', // 创建的订单号
      data: {}, // 商品基础数据
      imageData: '', // 商品相册
      num: 0, // 指定解封数量
      transactionparice: 0, // 商品交易实时价格
      undeblocked: ''
    }
  },
  computed: {
    ...mapState(['user', 'token', 'openid'])
  },
  methods: {
    ...mapMutations({
      setLoading: SET_LOADING
    }),
    // 加载商品基本信息
    async loadGoods () {
      this.setLoading({
        status: true,
        opacity: 0
      })
      let res = await getP2PGoodsDetail(this.$route.query.id)
      this.setLoading(false)
      if (res && res.code === 200) {
        this.data = res.data
        this.imageData = res.data.goods_img
      }
    }, // 查询用户持仓信息
    async loaduserslevel () {
      let form = new FormData()
      form.append('position_goods_id', this.$route.query.id)
      form.append('position_user_id', this.user.user_id)
      let res = await getP2PUserPositions(form)
      if (res && res.code === 200) {
        this.undeblocked = res.data.Undeblocked - res.data.Unblock
      }
    },
    // 减少数量
    jian () {
      if (this.num > 0) {
        this.num -= 1
      }
    },
    // 增加数量
    jia () {
      if (this.num < this.undeblocked) {
        this.num += 1
      }
    },
    // 获取当日实时价
    async getrealtimeprice () {
      // 获取开盘价 当做交易价
      let form = new FormData()
      form.append('goodsid', this.$route.query.id)
      let respt = await getPriceTrend(form)
      if (respt && respt.code === 200) {
        this.transactionparice = respt.data.current_price // 交易单价
      } else {
        this.transactionparice = respt.data // 交易单价
      }
    },
    // 解封功能实现
    async jiefeng () {
      let response = await prescribedtradinghours()
      if (response.code === 200) {
        if (this.num === 0) {
          this.$toastText('请输入解封数量！')
          return false
        }
        let formadd = new FormData()
        formadd.append('record_user_id', this.$route.query.userid) // 交易用户
        formadd.append('record_goods_id', this.$route.query.id) // 交易商品id
        formadd.append('commission_price', this.transactionparice) // 交易委托单价
        formadd.append('commission_num', this.num * 5) // 交易委托数量
        formadd.append('paymentmethod', this.account_type) // 交易支付方式
        formadd.append('record_transaction_means', this.means) // 交易方式
        var resadd = await addtransactionrecord(formadd) // 添加未支付订单 等待支付
        if (resadd && resadd.code === 200) {
          this.no = resadd.data

          let code = GetQueryString('code')
          let form = new FormData()
          form.append('order_no', this.no)
          form.append('price', this.transactionparice)
          form.append('order_type', 'goods')
          form.append('pay_type', this.payType)
          form.append('code', code)
          form.append('body', this.no)
          form.append('attach', this.no)
          form.append('return_url', window.location.href)
          if (this.openid) {
            form.append('openid', this.openid)
          }
          let res = await payunblock(form)
          if (res && res.code === 200) {
            if (res.data.type === 'ali_jsapi') {
              this.$AliPay(res.data).then(() => {
                this.goBack()
              })
            }
          }
        }
      }
    }
  },
  created () {
    this.loadGoods()
    this.loaduserslevel()
    this.getrealtimeprice()
  },
  activated () {
    this.loadGoods()
    this.loaduserslevel()
    this.getrealtimeprice()
  }
}

</script>
<style lang="less" scoped="scoped">
#manifest {
  background: #f7f7f7;
  min-height: 100%;

  /deep/ .vux-header {
    border-bottom: 1px solid rgba(191, 191, 191, 1);
  }

  .mani_list {
    h2.mani_title {
      font-family: Source Han Sans SC;
      font-weight: bold;
      color: rgba(0, 0, 0, 1);
      line-height: 0.35rem;
      margin: 0.26rem 0.21rem;
    }

    ul.mani_con {
      padding: 0 0.15rem;
      padding-bottom: 0.01rem;

      li.mani_con_box {
        width: 100%;
        height: 2.3rem;
        background: rgba(255, 255, 255, 1);
        font-size: 0;
        margin-bottom: 0.2rem;

        div.mani_con_img {
          width: 1.9rem;
          height: 1.9rem;
          display: inline-block;
          margin: 0.2rem;
          vertical-align: middle;

          img {
            width: 100%;
            height: 100%;
          }
        }

        div.mani_con_right {
          display: inline-block;
          width: calc(100% - 2.3rem);
          height: 100%;
          vertical-align: middle;
          padding: 0.2rem;
          position: relative;

          p {
            display: block;
            font-size: 0.38rem;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            line-height: 0.35rem;
            height: 0.86rem;
          }

          i {
            font-size: 0.38rem;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: rgba(1, 0, 0, 1);
            font-style: normal;
            display: block;
            margin: 0.2rem 0;
          }

          span {
            display: inline-block;
            width: 1.7rem;
            height: 0.7rem;
            line-height: .7rem;
            background: rgba(255, 204, 0, 1);
            border-radius: 0.08rem;
            font-size: 0.42rem;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            text-align: center;
            vertical-align: middle;
          }

          .mani_con_num {
            position: absolute;
            left: 0.2rem;
            bottom: 0.2rem;

            b {
              font-size: 0.38rem;
              font-family: Source Han Sans SC;
              font-weight: 400;
              color: rgba(51, 51, 51, 1);
              line-height: 0.35rem;
              vertical-align: middle;
            }

            ul {
              display: inline-block;
              padding: 0 0.5rem 0 0;

              li {
                width: 0.7rem;
                height: 0.7rem;
                background: rgba(153, 153, 153, 0.3);
                display: inline-block;
                vertical-align: middle;
                margin: 0 0.1rem;
                border: none;

                img {
                  width: 100%;
                  height: 100%;
                }

                label {
                  display: inline-block;
                  width: 100%;
                  height: 100%;

                  input {
                    display: inline-block;
                    background: rgba(0, 0, 0, 0);
                    width: 100%;
                    height: 100%;
                    font-size: 0.36rem;
                    font-family: Source Han Sans SC;
                    font-weight: bold;
                    color: rgba(0, 0, 0, 1);
                    text-align: center;
                    border: none;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

</style>
